
<!-- LEFT -->
 <?php echo $this->loadTemplate('search','default') ?>
 <!-- END LEFT -->
 
 <!-- CONTENT -->
 <div id="jm-content">
    <h3 class="jm-title">活動人数</h3>
    <?php

    $options = array(
        'onActive' => 'function(title, description){
            description.setStyle("display", "block");
            title.addClass("open").removeClass("closed");
        }',
        'onBackground' => 'function(title, description){
            description.setStyle("display", "none");
            title.addClass("closed").removeClass("open");
        }',
        'startOffset' => 0,  // 0 starts on the first tab, 1 starts the second, etc...
        'useCookie' => false, // this must not be a string. Don't use quotes.
    );
    
    echo JHtml::_('tabs.start', 'tab_group_id', $options);
    
    echo JHtml::_('tabs.panel', JText::_('グラフ統計'), 'panel_1');
    
    ?>
     <form action="index.php?option=com_frstatistic" method="post" name="adminForm" class="adminform" id="adminForm">
        <div id="statistic_result" style="width: 100%;">
            <p>情報を入力してください。それから、「表示」を押してください。</p>
        </div>
        <input type="hidden" name="csv_data" id="csv_data_statistic" value=""/>
        <input type="hidden" name="task" value=""/>
    </form>
    
    
     <?php
    echo JHtml::_('tabs.panel', JText::_('ランキング'), 'panel_2');
    ?>
    <form action="index.php?option=com_frstatistic&disp=center" method="post" name="adminForm_2" id="adminForm_2">
        <div id="ranking_result" style="width: 100%;">
            <p>情報を入力してください。それから、「表示」を押してください。</p>
        </div>
        <input type="hidden" name="csv_data" id="csv_data_ranking" value=""/>
        <input type="hidden" name="task" value=""/>
    </form>
    <?php echo JHtml::_('tabs.end');?> 
    
 </div>
 <!-- END RIGHT -->

<script>
    jq(document).ready(function(){
        // Switch panel 
        jq('.ranking').hide();
        jq('.panel_1').click(function(event){
            jq('.ranking').hide();
            jq('.statistic').show('normal');
        });
        jq('.panel_2').click(function(event){
            jq('.ranking').show('normal');
            jq('.statistic').hide();
        });
        
        //switch between center and club
        jq('#cc_type').change(function(event){
            if(jq('#cc_type option:selected').val() == 'club'){
                jq('#lbl_ocba_code').html('クラブコード') ;
                jq('#lbl_ocba_name').html('クラブ名');
                jq('.facility').hide();
            } else {
                jq('#lbl_ocba_code').html('センターコード');
                jq('#lbl_ocba_name').html('センター名');
                jq('.facility').show('normal');
            }
        });
        
        //change period_f
        jq('#period_f').change(function(event){
            if(jq('#period_f').val() == '1'){
                jq('#start_month').val('01');
                jq('#start_month').show('normal');
                
            } else {
                jq('#start_month').val('04');
                jq('#start_month').hide();
            }
        });
        
        //submit form
        jq('#submit').on('click',function(event){
            if(jq('.panel_1').hasClass('open')){
                statistic();
            } else {
                ranking();
            }
        });
        
        //switch
        jq('#area').change(function(event){
            jq('#pref').load('index.php?option=com_frstatistic&task=ajax_get_pref&tmpl=component&area_code='+jq('#area').val());
        });
    });
    
    //display statistic result 
    function statistic(){
        var qr =   '&data[period]='+jq('#period').val()
                    +'&data[period_f]='+jq('#period_f').val()
                    +'&data[month]='+jq('#start_month').val()
                    +'&data[year]='+jq('#start_year').val()
                    +'&data[cc_type]='+jq('#cc_type').val()
                    +'&data[facility]='+jq('#facility').val()
                    +'&data[area]='+jq('#area').val()
                    +'&data[pref]='+jq('#pref').val()
                    +'&data[ocba_code]='+jq('#ocba_code').val()
                    +'&data[ocba_name]='+jq('#ocba_name').val();

        jq('#statistic_result').load('index.php?option=com_frstatistic&task=ajax_statistic&tmpl=component'+encodeURI(qr),
            function(){
                format_table('#statistic_result');
            }
        );
    }
    
    //display ranking result
    function ranking(){
        var qr =   '&data[yfrom]='+jq('#from_year').val()
                    +'&data[mfrom]='+jq('#from_month').val()
                    +'&data[yto]='+jq('#to_year').val()
                    +'&data[mto]='+jq('#to_month').val()
                    +'&data[cc_type]='+jq('#cc_type').val()
                    +'&data[facility]='+jq('#facility').val()
                    +'&data[area]='+jq('#area').val()
                    +'&data[pref]='+jq('#pref').val();

        jq('#ranking_result').load('index.php?option=com_frstatistic&task=ajax_ranking&tmpl=component'+encodeURI(qr));
    }
    
    //function suport download csv
    function table2csv(table){
        var arr = [];
        table.children('tbody').each(function(){
            jq(this).children('tr').each(function(){
                var tmp = [];
                jq(this).children('th, td').each(function(){
                    tmp.push(jq(this).text());
                });
                arr.push(tmp);
            });
            
        });
        
        var csv = [];
        var i = 0;
        jq(arr).each(function(k, v) {
            var row = v.join(",");
            csv.push(row);
        });        
        //csv = encodeURIComponent(csv.join("\r\n"));
        csv = csv.join("\r\n");
        
        return csv;
    }
    function rows2cols(a) {
        var r = [];
        var t;
        
        for (var i=0, iLen=a.length; i<iLen; i++) {
            t = a[i];            
            for (var j=0, jLen=t.length; j<jLen; j++) {
                if (!r[j]) {
                    r[j] = [];
                }
                r[j][i] = t[j];
            }
        }
        return r;
    }
    
    function export_csv_statistic(){
        jq('#csv_data_statistic').val(table2csv(jq('#tb_result_statistic')));
        if(jq('#csv_data_statistic').val() == '')
            return;        
        Joomla.submitform('export', document.getElementById('adminForm'));
    }
    
    function export_csv_ranking(){
        jq('#csv_data_ranking').val(table2csv(jq('#tb_result_ranking')));
        if(jq('#csv_data_ranking').val() == '')
            return;        
        Joomla.submitform('export', document.getElementById('adminForm_2'));
    }
    
    function display_chart(){
        var tmpl = "<div id='chart_content' style='max-height: 450px; overflow: auto;'> "+
                        "<h2> 使用者人数集計 (グラフ統計)<\/h2> "+
                        "<div id='chart_div' style='height: 500px;'><\/div> "+
                        "<br><br> "+
                        "<div id='chart_table' style='text-align: center;'><\/div> "+
                        "<br> "+
                        "<a style='float: right;' href='#chart_content' >ページの先頭へ<\/a> "+
                    "<\/div> ";
        jq.Zebra_Dialog(tmpl, {
                height: 800,
                width: 1000,
                title:  '活動人数',
                type:  '',
                buttons:  [
                    {caption: 'キャンセル', callback: function() {}}
                ]
        });
        
        drawVisualization();
    }
    
    function drawVisualization() {
        
        arr = new Array();
        result = JSON.parse(jq('#char_data').html());
        var data = google.visualization.arrayToDataTable(result.chart_data);
        var view = new google.visualization.DataView(data);
            
        var count = result.chart_num_col;
        var mode = result.chart_disp;
        //console.log(mode);
        var s = {};
        if(mode == 1){
            s[count-2] = {type: "line"};
            view.hideColumns([count-1]);

        } else if(mode == 2){
            s[count-2] = {type: "line"};
            s[count-3] = {type: "line"};
            view.hideColumns([count-2]);
        }

        var options = {
        	vAxis: {title: "活動人数"},
        	seriesType: "bars",
        	series: s,
        	isStacked: true
        };
        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(view, options);
        var inverse_data = google.visualization.arrayToDataTable(rows2cols(result.chart_data));
        var table = new google.visualization.Table(document.getElementById('chart_table'));
        table.draw(inverse_data, null);

    }

    function format_table(target){
        jq(target + ' td').each(function(){
            if(!isNaN(parseInt(jq(this).html()))){
                this.style.textAlign = "right";
            }
        });
    }
</script>
 
 
